import React, { VFC, useEffect, useState} from "react"
import { Form, Input, Button, Upload, message, Modal } from 'antd';

import { uploadPic, editTeamGroup, saveTeamGroup} from '@services/index'
import { FILe_URL } from "@tools/config";
import {checkUploadFile, pick} from '@tools/utils'
import { useRecoilValue } from 'recoil';
import { fetchProjectIssueAllList} from '@selectors/selectProduct';
import MySelect from './mySelect';

const FormItem = Form.Item;
const { TextArea } = Input;

type PropsType = {
    dataInfo?:any[]|null
    onCancel:() => void
    isVisible:boolean
}
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
};

const Edit:VFC<PropsType> = props => {
    const initFormInfo = {
        name:undefined,
        issueId:undefined,
        loginName:undefined,
        password:undefined,
        headPic:undefined,
        introductions:undefined,
    }
    const {dataInfo, isVisible, onCancel} = props;
    const [formInfo, setFormInfo] = useState<any>(initFormInfo);
    useEffect(()=>{
        console.log(dataInfo)
        if(dataInfo) setFormInfo(dataInfo)
    }, []);

    // 图片上传前校验
    const beforeUpload = (file:any) => {
        if(checkUploadFile(file, 'image')){_uploadPic(file);}
    }
    // 上传图片
    const _uploadPic = async (e: string | Blob) => {
        const formData = new FormData();
        formData.append("file", e);
        const params = {
            subject: 'sys',
            type: 'head',
            isNewFileName: 1
        };
        const { data, status } = await uploadPic(params, formData)
        if(status == '0'){
            const {fileName} = data;
            setFormInfo({
                ...formInfo,
                headPic: fileName
            })
        }
    }
    // 修改输入框值
    const onChange = (e:any, type:string) => {
        setFormInfo({
            ...formInfo,
            [type]: e?.target?e.target.value:e
        })
    }
    // 提交表单数据
    const submit = async () => {
        const params = pick(formInfo, [
            "id",
            "name",
            "issueId",
            "loginName",
            "password",
            "headPic",
            "introductions"
        ]);
        if(!params.name){
            message.error('请输入小组名称');
            return
        }
        const method = formInfo.id ? editTeamGroup: saveTeamGroup
        const { data, status } = await method(params)
        if(status == '0'){
            message.success('提交成功');
            onCancel()
        }
    };
    
    return (
        <Modal visible={isVisible}  title={dataInfo?"编辑":"添加"} onCancel={onCancel} footer={false}>
            <Form {...layout}>
                <FormItem label="小组名称">
                    <Input value={formInfo.name} onChange={e => onChange(e, 'name')} placeholder="请输入小组名称"/>
                </FormItem>
                <FormItem label="项目期数" wrapperCol={{'span': 8}}>
                    <MySelect dataList={useRecoilValue(fetchProjectIssueAllList)} mode={undefined} selectValue={formInfo.issueId} onChange={e => onChange(e, 'issueId')} />
                </FormItem>
                <FormItem label="登录名称">
                    <Input value={formInfo.loginName} onChange={e => onChange(e, 'loginName')} placeholder="请输入登录名称"/>
                </FormItem>
                <FormItem label="登录密码">
                    <Input type="password" value={formInfo.password} onChange={e => onChange(e, 'password')} placeholder="请输入登录密码"/>
                </FormItem>
                <FormItem label="小组头像">
                    <Upload name="headPic"
                        listType="picture-card"
                        className="avatar-uploader-pic"
                        showUploadList={false}
                        beforeUpload={beforeUpload}
                        customRequest={()=>false}>
                        {formInfo.headPic?<img src={`${FILe_URL}${formInfo.headPic}`} />:'+'}
                    </Upload>
                </FormItem>
                <FormItem label="小组简介">
                    <TextArea  value={formInfo.introductions} onChange={e => onChange(e, 'introductions')} placeholder="请输入小组简介"/>
                </FormItem>
                <FormItem wrapperCol={{ offset: 10, span: 16 }}>
                    <Button type="primary" onClick={submit}>提交</Button>
                </FormItem>
            </Form>
        </Modal>
    )
}
export default Edit
